<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue.js 表单</title>
		<script src="../js/vue.min.js"></script>
	</head>
	<body>
		<!-- 演示 input 和 textarea 元素中使用 v-model 实现双向数据绑定 -->
		<div id="app">
			<p>input 元素:</p>
			<input v-model="message" placeholder="编辑我...." />
			<p>消息是： {{ message }}</p>
			
			<p>textarea 元素:</p>
			<p style="white-space: pre">{{message2}}</p>
			<textarea v-model="message2" placeholder="多行文本输入......"></textarea>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					message:'Runoob',
					message2:'菜鸟教程\r\nhttp://www.runoob.com'
				}
			})
		</script>
		<p>----------------------------------------</p>
		<!-- 复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组 -->
		<div id="app1">
		  <p>单个复选框：</p>
		  <input type="checkbox" id="checkbox" v-model="checked">
		  <label for="checkbox">{{ checked }}</label>
			
		  <p>多个复选框：</p>
		  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
		  <label for="runoob">Runoob</label>
		  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
		  <label for="google">Google</label>
		  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
		  <label for="taobao">taobao</label>
		  <br>
		  <span>选择的值为: {{ checkedNames }}</span>
		</div>

		<script>
		new Vue({
		  el: '#app1',
		  data: {
			checked : false,
			checkedNames: []
		  }
		})
		</script>
		<p>----------------------------------------</p>
		<!-- 单选按钮的双向数据绑定 -->
		<div id="app2">
			<input type="radio" id="runoob" value="Runoob" v-model="picked" />
			<label for="runoob">Runoob</label>
			<br />
			<input type="radio" id="google" value="Google" v-model="picked" />
			<label for="google">Google</label>
			<br />
			<span>选中值为：{{picked}}</span>
		</div>
		，<script>
			new Vue({
				el:'#app2',
				data:{picked:'Runoob'}
			})
		</script>
		<p>----------------------------------------</p>
		<!-- 演示下拉列表的双向数据绑定 -->
		<div id="app3">
			 <select v-model="selected" name="fruit">
				<option value="">选择一个网站</option>
				<option value="www.runoob.com">Runoob</option>
				<option value="www.google.com">Google</option>
			  </select>
			  
			<div id="output">
				选择的网站是：{{selected}}
			</div>
		</div>
		<script>
			new Vue({
				el:'#app3',
				data:{
					selected:''
				}
			})
		</script>
	</body>
</html>
